<script setup>
import { ref, watch } from 'vue'
const person = ref({
  name: '张三',
  age: 10
})
const count = ref(10)
//侦听复杂数据
watch(person, (newValue) => {
  console.log(newValue.age);
}, {
  deep: true,
  immediate: true
})
const changeAge = () => {
  person.value.age++
}
//侦听简单数据
watch(count, (newValue, oldValue) => {
  console.log(newValue, oldValue);
})
const addCount = () => {
  count.value++
}
//侦听多个数据
const money = ref(100)
const addMoney = () => {
  money.value += 10000
}
watch([count, money], (newValue, oldValue) => {
  console.log(newValue, oldValue);
})
</script>

<template>
  <div>{{ count }}</div>
  <button @click="addCount">++</button>
  <div>{{ money }}</div>
  <button @click="addMoney">加钱</button>
  <br>
  <div>
    {{ person }}
  </div>
  <button @click="changeAge">改年龄</button>
</template>